<template>
    <div ref="chartRef3" style="width: 100%;" :style="{height: height}"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
const props = withDefaults(defineProps<{
    height: string,
    center1: string,
    center2: string,
    radius1: number,
    radius2: number
}>(), {
    height: '50vh',
    center1: '60%',
    center2: '50%',
    radius1: 20,
    radius2: 140
})
// 玫瑰图
const chartRef3 = ref(null)
let chartInstance3:any = null
const initChart3 = () => {
  if (chartRef3.value) {
    chartInstance3 = echarts.init(chartRef3.value)
    const option = {
      title: {
        text: 'Nightingale Chart',
        subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        left: 'center',
        top: 'bottom',
        data: [
          'rose1',
          'rose2',
          'rose3',
          'rose4',
          'rose5',
          'rose6',
          'rose7',
          'rose8'
        ]
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        
        {
          name: 'Area Mode',
          type: 'pie',
          radius: [props.radius1, props.radius2],
          center: [props.center2, props.center1],
          roseType: 'area',
          itemStyle: {
            borderRadius: 5
          },
          data: [
            { value: 30, name: 'rose 1' },
            { value: 28, name: 'rose 2' },
            { value: 26, name: 'rose 3' },
            { value: 24, name: 'rose 4' },
            { value: 22, name: 'rose 5' },
            { value: 20, name: 'rose 6' },
            { value: 18, name: 'rose 7' },
            { value: 16, name: 'rose 8' }
          ]
        }
      ]
    }
    chartInstance3 && chartInstance3.setOption(option);
  }
}
const resizeChart = () => {
  chartInstance3?.resize()
}

onMounted(() => {
  initChart3()
  window.addEventListener('resize', resizeChart)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart)
  chartInstance3?.dispose()
})
</script>
<style lang="scss" scoped>
</style>
